<template>
  <div class="table-from">
    <a-row style="margin-bottom: 12px" type="flex" :class="{ 'change-width': !showMore }">
      <a-col :span="6">
        <div class="table-from-box dissymmetry">
          <span class="table-from-label">名称：</span>
          <a-input placeholder="请输入流水线名称" v-model:value="fromData.name" style="width: 100%" allowClear>
            <template #prefix>
              <SvgIcon class="iconDef" :name="'search'" :color="'#d9d9d9'" width="16" height="16" />
            </template>
          </a-input>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="table-from-box">
          <span class="table-from-label">状态：</span>
          <a-select
            style="width: 100%"
            :options="statusOptions"
            v-model:value="fromData.status"
            placeholder="请选择"
            :fieldNames="{ label: 'name', value: 'id' }"
            allowClear
          >
            <template #suffixIcon>
              <CaretDownOutlined style="color: #6b84a5" />
            </template>
          </a-select>
        </div>
      </a-col>

      <a-col :span="6">
        <div class="table-from-box">
          <span class="table-from-label">所在应用：</span>
          <a-select
            style="width: 100%"
            :options="useOptions"
            show-search
            optionFilterProp="name"
            v-model:value="fromData.applicationCode"
            placeholder="请选择"
            :fieldNames="{ label: 'name', value: 'code' }"
            allowClear
          >
            <template #suffixIcon>
              <CaretDownOutlined style="color: #6b84a5" />
            </template>
          </a-select>
        </div>
      </a-col>

      <a-col :span="6">
        <div class="table-from-box">
          <template v-if="showMore">
            <span class="table-from-label">所在组件：</span>
            <a-select
              style="width: 100%"
              :options="componentOptions"
              show-search
              optionFilterProp="name"
              v-model:value="fromData.componentLabel"
              placeholder="请选择"
              :fieldNames="{ label: 'name', value: 'label' }"
              allowClear
            >
              <template #suffixIcon>
                <CaretDownOutlined style="color: #6b84a5" />
              </template>
            </a-select>
          </template>

          <div class="table-from-btn-right" v-if="!showMore">
            <div class="actionMore" @click="handleCutStatus">
              {{ showMore ? '收起' : '更多' }}
              <UpOutlined :class="{ 'rotate-box': !showMore }" />
            </div>
            <a-button class="actionBtn" type="primary" ghost @click="handleSearch">
              <SvgIcon class="iconDef" :name="'search'" :color="'#2590FF'" width="16" height="16" />
              查询
            </a-button>

            <a-button class="actionBtn" type="primary" ghost @click="resetData">
              <SvgIcon class="iconDef" :name="'refresh'" :color="'#2590FF'" width="16" height="16" />
              重置
            </a-button>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" v-show="showMore" class="paddingBottom">
      <a-col :span="6">
        <div class="table-from-box dissymmetry">
          <span class="table-from-label">所在环境：</span>
          <a-select
            style="width: 100%"
            :options="environmentOptions"
            show-search
            optionFilterProp="name"
            v-model:value="fromData.envUuid"
            placeholder="请选择"
            :fieldNames="{ label: 'name', value: 'uuid' }"
            allowClear
          >
            <template #suffixIcon>
              <CaretDownOutlined style="color: #6b84a5" />
            </template>
          </a-select>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="table-from-box">
          <span class="table-from-label">最近运行时间：</span>
          <a-range-picker
            v-model:value="fromData.lastRunTime"
            :valueFormat="'YYYY-MM-DD HH:mm:ss.SSS'"
            allowClear
            :show-time="{ format: 'HH:mm:ss' }"
          >
            <template #suffixIcon>
              <CaretDownOutlined style="color: #6b84a5" />
            </template>
          </a-range-picker>
        </div>
      </a-col>

      <a-col :span="6">
        <div class="table-from-box">
          <span class="table-from-label">触发信息：</span>
          <a-select
            style="width: 100%"
            :options="tiggerWayOptions"
            v-model:value="fromData.triggerWay"
            placeholder="请选择"
            :fieldNames="{ label: 'text', value: 'id' }"
            allowClear
          >
            <template #suffixIcon>
              <CaretDownOutlined style="color: #6b84a5" />
            </template>
          </a-select>
        </div>
      </a-col>

      <a-col :span="6">
        <div class="table-from-box">
          <div class="table-from-btn" v-if="showMore">
            <div class="actionMore" @click="handleCutStatus">
              {{ showMore ? '收起' : '更多' }}
              <UpOutlined :class="{ 'rotate-box': !showMore }" />
            </div>
            <a-button class="actionBtn" type="primary" ghost @click="handleSearch">
              <SvgIcon class="iconDef" :name="'search'" :color="'#2590FF'" width="16" height="16" />
              查询
            </a-button>

            <a-button class="actionBtn" type="primary" ghost @click="resetData">
              <SvgIcon class="iconDef" :name="'refresh'" :color="'#2590FF'" width="16" height="16" />
              重置
            </a-button>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { CaretDownOutlined, UpOutlined } from '@ant-design/icons-vue';
import { pipelineStatusMap } from '@/settings/commonSettings';
import { PipelineStatus } from '@/enums/pipelineEnum';
import {
  getListAppByKeyword,
  getListComponentByKeyword,
  getListEnvironmentByKeyword,
  getListTriggerWay,
  getListInstanceStatus,
} from '@/api/pipeline';

const showMore = ref(false);

const emits = defineEmits(['handleSearch']);
const fromData = reactive<any>({
  name: '',
  status: undefined,
  applicationCode: undefined,
  componentLabel: undefined,
  envUuid: undefined,
  lastRunTime: [],
  triggerWay: undefined,
});

const handleSearch = () => {
  emits('handleSearch', {
    ...fromData,
    startTimeFrom: fromData.lastRunTime[0] || '',
    startTimeTo: fromData.lastRunTime[1] || '',
  });
};

const resetData = () => {
  fromData.name = '';
  fromData.status = undefined;
  fromData.applicationCode = undefined;
  fromData.componentLabel = undefined;
  fromData.envUuid = undefined;
  fromData.lastRunTime = [];
  fromData.triggerWay = undefined;
  emits('handleSearch', {
    ...fromData,
    startTimeFrom: fromData.lastRunTime[0] || '',
    startTimeTo: fromData.lastRunTime[1] || '',
  });
};

//获取状态列表
const statusOptions = ref<any[]>([]);
const getInstanceStatusList = async () => {
  await getListInstanceStatus().then((res) => {
    statusOptions.value = res.map((item: any) => {
      return {
        ...item,
        name: pipelineStatusMap[item.text as PipelineStatus]?.text || item.text,
      };
    });
  });
};

//获取所属应用
const appKeyWord = ref<string>('');
const useOptions = ref<any[]>([]);
const getAppList = async () => {
  await getListAppByKeyword(appKeyWord.value).then((res) => {
    useOptions.value = res;
  });
};

//获取所属组件
const componentKeyWord = ref<string>('');
const componentOptions = ref<any[]>([]);
const getComponentList = async () => {
  await getListComponentByKeyword(componentKeyWord.value).then((res) => {
    componentOptions.value = res;
  });
};

//获取所属环境
const environmentKeyWord = ref<string>('');
const environmentOptions = ref<any[]>([]);
const getEnvironmentList = async () => {
  await getListEnvironmentByKeyword(environmentKeyWord.value).then((res) => {
    environmentOptions.value = res;
  });
};

// 获取触发信息
const tiggerWayOptions = ref<any[]>([]);
const getTriggerWayList = async () => {
  await getListTriggerWay().then((res) => {
    tiggerWayOptions.value = res;
  });
};

onBeforeMount(() => {
  getInstanceStatusList();
  getAppList();
  getComponentList();
  getEnvironmentList();
  getTriggerWayList();
});

defineExpose({
  resetData,
});

//切换收起打开状态
const handleCutStatus = () => {
  showMore.value = !showMore.value;
};
</script>

<style scoped lang="less">
.table-from {
  padding: 16px 0 0 0;
  border-bottom: 1px solid #e7eff8;
  .table-from-box {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    .table-from-label {
      min-width: 120px;
      text-align: right;
      display: inline-block;
      margin-left: 12px;
    }
  }
  .dissymmetry {
    .table-from-label {
      min-width: 80px;
    }
  }

  .table-from-btn {
    display: flex;
    justify-content: flex-end;
    * {
      margin-right: 12px;
      &:last-child {
        margin-right: 0;
      }
    }
  }

  .table-from-btn-right {
    display: flex;
    justify-content: flex-end;
    * {
      margin-right: 12px;
      &:last-child {
        margin-right: 0;
      }
    }
  }

  .change-width {
    .table-from-box {
      .table-from-label {
        min-width: 80px;
      }
    }
  }

  .rotate-box {
    transform: rotate(180deg);
  }

  .actionMore {
    min-width: 40px;
    display: flex;
    color: #1890ff;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding-right: 16px;
    &:after {
      content: '';
      width: 1px;
      height: 14px;
      background: #e7eff8;
      margin-left: 16px;
    }
    &:hover {
      color: #1861ff;
    }
  }

  .paddingBottom {
    padding-bottom: 16px;
  }
}
</style>
